<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷表</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="imags/22.jpg">
    <style>
        .card {
            margin-top: 2rem;
        }
    </style>
</head>

<body style="background:url(/imags/2.jpg); background-size:100% 100% ; background-attachment: fixed">
    <div class="container">
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <div class="card" style="width: 50rem;opacity: 0.7;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <!-- <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                                      >添加问卷</button> -->
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p>
                                <h1>新的问卷</h1>
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm"></div>
        </div>

        <!-- 显示添加问卷的主题以及查看统计分数 -->
        <form action="javascript:;" id="myform">
            <div  style="padding: 10px;width: 800px;margin-left: 160px;min-height: 500px;background-color: rgba(226, 212, 212,.6);margin-top: 30px;">
                <ol>
                    <li><label for="">问卷的主题:</label>
                        <p></p><input type="text" name="theme" placeholder="请输入问卷的主题">
                    </li>
                    <li><label for="">问卷的说明:</label>
                        <p></p><textarea name="remarks" id="" cols="30" rows="10" placeholder="请输入问卷说明"></textarea>
                    </li>
                    <li><label for="">问卷的选项:</label> <button onclick="addOption()">添加问卷选项</button></li>

                </ol>
                <!-- 题目列表 -->
                <div class="op-list">
                    <ol>

                    </ol>
                </div>
                <!-- 创建 -->
                <div style="margin-left: 30px;height: 200px;">
                    <button onclick="submitBtn()">创建问卷</button>
                </div>



            </div>
        </form>
        <style>
            .op-list li {
                padding: 6px;
            }
        </style>



        <script src="js/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
        <script>
            function addOption() {              
                $('.op-list ol').append(`<li><input name="option" type="text"></li>`)

            }
            function submitBtn(){
                
                axios({
                    method:'post',
                    url:'/requirequestion',
                    data:$('#myform').serialize()
                })                
                .then(res=>{
                    res=res.data
                    console.log(res);
                    if(res.code===200){
                        alert('添加问卷成功')
                        location.href='/'
                    }
                    else{
                        alert(res.msg)
                    }
                })
                .catch(err=>{
                    console.log(err);
                })
            }
        </script>
</body>

</html>